<div class="page-container" v-cloak>
    <el-card>
        <template #header>
            <div class="breadcrumb" style=" overflow: hidden;">
                <el-breadcrumb separator="/" style=" float: left;  ">
                    <el-breadcrumb-item><a href="{:url('admin/goods/index')}">套餐列表</a></el-breadcrumb-item>
                    <el-breadcrumb-item>{$title}</el-breadcrumb-item>
                </el-breadcrumb>
                <el-breadcrumb separator="/" style=" float: right;  ">
                    <el-button type="primary" @click="refresh()">刷新</el-button>
                </el-breadcrumb>
            </div>
        </template>
        <div>
            <el-form label-width="100px">


                <el-form-item label="商品名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="商品分类">
                    <div>
                        <el-checkbox-group v-model="form.goods_type_id">
                            <el-checkbox
                                    v-for="(item, index) in labelOptions"
                                    :key="item.goods_type_id"
                                    :label="item.goods_type_id"
                                    :disabled="item.disabled"
                            >{{item.name}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-form-item>

                <el-form-item label="图片">
                    <div v-if="form.image_url" v-for="(imgUrl, index) in form.image_url" :key="index"
                         @click="show_select_image=true">
                        <el-image class="form-upload__image" :src="imgUrl"></el-image>
                    </div>
                    <div v-else>
                        <el-button @click="show_select_image=true" type="primary">选择图片</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="商品价格">
                    <div>
                        <el-input v-model="form.price" type="number"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="销量">
                    <div>
                        <el-input v-model="form.total" type="number"></el-input>
                    </div>
                </el-form-item>

                <el-form-item label="站点公告">
                    <div>
                        <ueditor placeholder="请输入站点公告" @update="richUpdateEvent"></ueditor>
                    </div>
                </el-form-item>
                <el-form-item>
                        <el-button @click="submitEvent" type="primary">
                        提交
                    </el-button>
                    <el-button @click="goBack" type="warning">
                        返回
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
    <select-image v-model:show="show_select_image" @confirm="selectImageConfirm"
                  @close="show_select_image=false"></select-image>
</div>
{hcmstag:include file="admin@/components/ueditor"}
{hcmstag:include file="admin@/components/upload/select-image"}
<script>
    const App = {
        data() {
            return {
                form: {  image_url: [],},
                image_url: '',
                value: [],
                labelOptions: [], // 用于存储从接口获取的选项数据
                show_select_image: false,
                editorConfig: {}
            }
        },
        mounted() {
            this.getInfo()
        },
        computed: {},
        methods: {
            handleChange(value) {
                console.log(value);
            },
            selectImageConfirm(e) {

                this.form.image_url = []; // 初始化数组，如果它还没有被初始化

                e.forEach(item => {
                    this.form.image_url.push(item.file_url);
                });
            },
            richUpdateEvent(e) {
                console.log('richUpdateEvent', e)
                this.form.content = e;
            },

            /**
             * 获取编辑所需信息
             */
            getInfo() {
                let goods_id = this.getUrlQuery('goods_id', 0)
                this.httpGet("{:url('admin/goods/edit')}/" + goods_id, {}).then(res => {
                    if (res.status) {
                        console.log(res)
                        let {labelOptions = {}, goods = {}} = res.data
                        if(goods.image_url){
                          //  goods.image_url = JSON.parse(goods.image_url)
                        }

                        this.labelOptions = labelOptions

                        console.log(this.labelOptions)
                        var ue = UE.getEditor('editor_content');
                        ue.ready(function () {
                            //设置编辑器的内容
                            ue.setContent(goods.content);

                        });
                        if (goods.goods_id) {

                            this.form = {
                                ...goods,
                            }
                        }

                    }
                })
            },
            /**
             * 提交信息
             */
            submitEvent() {
                this.httpPost("{:url('admin/goods/edit')}", {
                    ...this.form,
                }, true).then(res => {
                    if (res.status) {
                        this.$message.success(res.msg)
                        location.href = "{:url('admin/goods/index')}"
                    }
                })
            },
            refresh() {
                location.replace(location.href);
            },
            goBack() {
                window.history.back();
            }
        }
    }
</script>

<style>
    /*默认输入框宽度*/
    .el-form-item .el-input {
        width: 500px;
    }

</style>
